﻿<!doctype html>
<html lang="en-GB">
    <head>
        <meta charset="utf-8" />
        <title>Rendezvous team</title>
        <style>
            table { width: 30em; }
            th { text-align: left; }
            td { padding: .2em; }
            tr.error td { color: red; }
        </style>
    </head>
    <body>

        <table id="employees">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Level</th>
                    <th>Multiplier</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

        <hr />

        <form id="givePayrise">
            <label for="Id">Update salary:</label>
            <select name="Id"></select>
            <label for="marketMultiplier">Multiplier:</label>
            <select name="marketMultiplier">
                <option value="5">5</option>
                <option value="7">7</option>
                <option value="10">10</option>
                <option value="12">12</option>
                <option value="15">15</option>
            </select>
            <button type="submit">Update &raquo;</button>
        </form>

        <script>
        var require = {
            baseUrl: 'js'
        };
        </script>
        <script src="js/lib/require.js"></script>
        <script src="js/lib/jquery.js"></script>
        <script src="js/lib/underscore.js"></script>

        <script>
        var team;

        require(['team', 'lib/jquery'], function (makeTeam) {

            team = makeTeam($('#employees'));
        });
        </script>

        <script type="text/template" id="template-employee">
        <tr>
            <td><%= id %></td>
            <td><%= name %></td>
            <td><%= level %></td>
            <td><%= marketMultiplier %></td>
            <td><%= salary %></td>
        </tr>
        </script>
        
        <script type="text/template" id="template-error">
        <tr class="error">
            <td><%= errorMessage %></td>
        </tr>
        </script>
    </body>
</html>